<template>
    <div>
      <!-- 使用 v-text 绑定文本内容 -->
      <p v-text="message"></p>
  
      <!-- 使用 v-html 绑定 HTML 内容 -->
      <p v-html="htmlMessage"></p>
  
      <!-- 使用 v-bind 绑定属性 -->
      <img v-bind:src="imageUrl" alt="示例图片" style="width: 200px; height:200px ">
      <!-- 简写形式 -->
      <img :src="imageUrl" alt="示例图片" style="width: 200px; height:200px ">
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  const message = ref('这是使用 v-text 绑定的文本内容。');
  const htmlMessage = ref('<span style="color: red;">这是使用 v-html 绑定的 HTML 内容。</span>');
  const imageUrl = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
  </script>